<!--
 * @description  :来源登记列表
 * @descriptionDetail:来源登记列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-11 09:52:43
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon" @click="confirmBack">
        确定
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="content">
			<!-- 正文内容, 绝对定位处理距离顶部高度 -->
			<view class="case-search-lay">
				<u-search placeholder="请输入内容摘要,列表数据向左滑动编辑" class="case-search" shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true" v-model="keyWords" @custom="searchClick">
				</u-search>
			</view>
			<me-table :i="0" :index="0" :top="100" :load-data="loadSourceListData" :height="getListViewHeight()" :init-load="false" ref="mescrollItem0">
				<view class="u-source-list" slot-scope="d">
					<u-swipe-action :show="d.data.show" :index="d.index" :options="options" :disabled="d.data.disabled" @click="editItem(d.data, d.index)" @open="offOpen">
						<u-checkbox :shape="isRadio ? 'circle' : 'square'" :name="d.data.party" :label-disabled="true" :disabled="d.data.disabled" v-model="d.data.checked" @change="checkboxChange(d.data, $event)">
							<view class="u-radio-label">
								<view class="u-main-title u-main-first">
								</view>
								<view class="u-main-title">
									{{ d.data.cluesBrief }}
								</view>
								<view class="u-main-content">
									<u-row>
										<u-col span="3">
											{{ d.data.inputPerson }}
										</u-col>
										<u-col span="3">
											{{ d.data.cluesTypeName }}
										</u-col>
										<u-col span="6">
											来源日期：{{ d.data.cluesDate }}
										</u-col>
									</u-row>
								</view>
							</view>
						</u-checkbox>
					</u-swipe-action>
				</view>
			</me-table>

      <!-- 底部按钮 -->
      <view>
        <u-button plain class="flat-btn" type="primary" @click="sourceShow = true">
          新增来源登记
        </u-button>
      </view>
    </view>

    <!-- 来源登记 弹出层 -->
    <view class="layer-location">
      <u-popup mode="bottom" border-radius="10" :mask-custom-style="styleConfim" v-model="sourceShow">
        <view class="btns" v-for="(item, index) in layerInfo" :key="index">
          <u-button class="con" :hairLine="false" @click="toPage(item)">
            {{ item.name }}
          </u-button>
        </view>
        <view class="btns cancel">
          <u-button @click="sourceShow = false">
            取消
          </u-button>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
	import meTable from '@/components/me-table.vue';
	import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
	import {
		CASE_SOURCE,
	} from '@/service/case/mapping/index.js';
	import caseService from '@/service/case/case.service.js';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff',
					},
				}, ],
				keyWords: '', // 关键字查询
				selectIndex: [], // 选中的index
				selectResult: [], // 选中的数据
				isRadio: true, // 是否单选
				sourceShow: false, // 控制来源登记弹出层 显示或隐藏
				styleConfim: {
					background: 'rgba(0, 0, 0, 0.3)',
				},
				value: '',
				layerInfo: [{
						id: CASE_SOURCE['reportRecord'],
						name: '投诉举报',
						url: '/pages/case/sourceregister/complaints',
					},
					{
						id: CASE_SOURCE['marketCheck'],
						name: '市场查获',
						url: '/pages/case/sourceregister/market',
					},
					{
						id: CASE_SOURCE['transIn'],
						name: '案件移交',
						url: '/pages/case/sourceregister/casetransfer',
					},
					{
						id: CASE_SOURCE['appoint'],
						name: '指定管辖',
						url: '/pages/case/sourceregister/assignarea',
					},
				],
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {
			this.setRightBtns();
		},
		methods: {
			// 设置右侧标题
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight('确定', () => {
					this.confirmBack();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.confirmBack();
				}
			},
			getListViewHeight() {
				let p = this.$u.sys().windowHeight - 44 - uni.upx2px(100) - this.$u.sys().statusBarHeight + 'px';
				// #ifdef H5-DINGDING || H5-WECHAT
				p = this.$u.sys().windowHeight - uni.upx2px(100) - this.$u.sys().statusBarHeight + 'px';
				// #endif
				return p;
			},
			// 列表查询数据
			loadSourceListData(page) {
				let self = this;
				return new Promise((resolve, reject) => {
					caseService
						.getSourcesClueList(page.num, page.size, {
							cluesBrief: this.keyWords,
						})
						.then((res) => {
							if (!res.success) {
								self.$modal.alert(res.msg);
								resolve({
									count: 0,
									data: [],
								});
								return;
							}
							res.data.forEach((itm) => {
								itm.checked = self.selectIndex.includes(itm.cluesUuid);
								itm.show = false;
								itm.disabled = itm.handled;
							});
							resolve({
								count: res.count,
								data: res.data,
							});
						})
						.catch((err) => {
							self.$modal.alert('查询失败');
							resolve({
								count: 0,
								data: [],
							});
						});
				});
			},
			searchClick(keys) {
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			// 点击确定返回列表页
			confirmBack() {
				let self = this;
				if (this.selectIndex.length == 0) {
					this.$u.toast('请选择来源登记');
					return false;
				}

      self.backPrev({
        paramKey: 'sourceList',
        param: this.selectResult,
      });
    },
    // 跳转
    toPage(item) {
      this.sourceShow = false;
      if (item.id == CASE_SOURCE['reportRecord']) {
        this.setRouteParam({
          docUuid: 'doc-01',
        });
      } else if (item.id == CASE_SOURCE['transIn']) {
        this.setRouteParam({
          docUuid: 'e88fe06af5c44e2891deed12d94f90db',
        });
      } else if (item.id == CASE_SOURCE['appoint']) {
        this.setRouteParam({
          docUuid: 'doc-07',
        });
      }
      this.$u.route(item.url);
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(itm, e) {
      // 列表数据只能单选
      if (this.isRadio) {
        this.selectIndex.length = 0;
        this.selectResult.length = 0;
        if (e.value) {
          this.selectIndex.push(itm.cluesUuid);
          this.selectResult.push(itm);
        }
        let list = this.$refs.mescrollItem0.listDatas;
        list.map((item, index) => {
          item.checked = this.selectIndex.includes(item.cluesUuid);
        });
      } else {
        if (e.value) {
          this.selectIndex.push(itm.cluesUuid);
          this.selectResult.push(itm);
        } else {
          this.selectIndex = this.selectIndex.filter((str) => {
            return str != itm.cluesUuid;
          });
          this.selectResult = this.selectResult.filter((item) => {
            return item.cluesUuid != itm.cluesUuid;
          });
        }
      }
    },
    refreshSwiperStatus() {
      let self = this;
      this.$refs.mescrollItem0.listDatas.forEach((item) => {
        self.$set(item, 'show', false);
      });
    },
    // 向左滑动编辑
    editItem(data, pos) {
      let filterInfo = this.layerInfo.filter((item) => {
        return item.id == data.cluesType;
      });
      this.$refs['mescrollItem0'].listDatas[pos].show = false;
      if (filterInfo[0].id == CASE_SOURCE['reportRecord']) {
        // 投诉举报
        this.setRouteParam({
          docUuid: 'doc-01',
          bizUuid: data.cluesUuid,
        });
      } else if (filterInfo[0].id == CASE_SOURCE['marketCheck']) {
        this.$modal.showLoading('正在查询...');
        caseService.getSourceDocIns(data.cluesUuid).then((res) => {
          this.$modal.hideLoading();
          this.setRouteParam({
            docInsUuid: res.bean,
          });
          this.$u.route(filterInfo[0].url);
        });
        return;
      } else if (filterInfo[0].id == CASE_SOURCE['transIn']) {
        this.setRouteParam({
          docUuid: 'e88fe06af5c44e2891deed12d94f90db',
          bizUuid: data.cluesUuid,
        });
      } else if (filterInfo[0].id == CASE_SOURCE['appoint']) {
        this.setRouteParam({
          docUuid: 'doc-07',
          bizUuid: data.cluesUuid,
        });
      }
      this.$u.route(filterInfo[0].url);
    },
    offOpen(index) {
      // 排他 当前的打开，其他关闭
      let list = this.$refs.mescrollItem0.listDatas;
      list[index].show = true;
      list.map((val, idx) => {
        if (index != idx) list[idx].show = false;
      });
    },
    // 新增来源登记返回操作
    updateBackState(params) {
      this.refreshSwiperStatus();
      if (params.refreshBack) {
        this.getMescroll(this.tabIndex).triggerDownScroll();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
	@import '../case_common.scss';

	.flat-btn {
		position: fixed;
		bottom: 40rpx;
		margin: auto;
		left: 60rpx;
		right: 60rpx;
		height: 46px;
	}

	.nav-right-icon {
		padding-right: 15px;
		color: #fff;
	}

	.case-search-lay {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 40px;
		/* #endif */
		z-index: 999;
		width: 100%;
		padding: 14rpx 0;

		.case-search {
			margin: 12rpx 40rpx !important;
		}
	}

	.layer-location {
		.btns {
			width: 80%;
			margin: 0 auto;
			padding: 20rpx 0;

			.con {
				color: rgb(52, 120, 247);
				font-size: 32rpx;
				background-color: #f4f4f5;
				border-color: #f4f4f5;
				border-bottom: 2rpx solid #f2f2f2;
			}
		}
	}

	.mescroll-body {
		background-color: #f3f4f6;
	}

	/deep/ .u-checkbox__label {
		width: 100%;
	}

	.u-source-list {
		border: 1px solid #eeeeee;
		padding: 16rpx;
		margin: 0 3px 8px 3px;
		background: #ffffff;
		border-radius: 6px;

		.u-radio-label {
			display: flex;
			flex-direction: column;
			line-height: 32px;
			color: #333;
			padding-left: 16rpx;

			.u-main-title {
				font-size: 28rpx;
				color: #333;
				line-height: 25px;
			}

			.u-main-first {
				display: flex;
				justify-content: space-between;
			}

			.u-main-content {
				font-size: 26rpx;
				color: #787676;
				padding-top: 18rpx;

				.u-row {
					line-height: 22px;
				}
			}
		}
	}

	/deep/ .u-checkbox {
		width: 100%;
	}
</style>
